const socket = io({transports: ['websocket'], upgrade: false})

// 显示用户名
socket.on('login', username => {
    $('#username').html(username)
})

socket.on('show-volunteers', volunteers => {
    showVolunteer(volunteers)
})

socket.on('show-requests', requests => {
    showRequests(requests)
})

socket.on('grade', h_id => {
    $('#grade-box').show()
})

// 改变收藏的爱心颜色
socket.on('show-favorites', favorites => {
    showFavorites(favorites)
})

// 展示是否接受请求框
socket.on('assign-request', data => {
    showRequestDetail(data.request, data.kind)
})

function showVolunteer(onlineVolunteers) {
    $('#volunteer-list').html('')
    let lists = ''
    for (let i = 0; i < onlineVolunteers.length; i++) {
        let volunteer = onlineVolunteers[i]
        // 地图上标点
        addVolunteerPoint(volunteer.lat, volunteer.lon, volunteer.username)

        lists += `
        <div class="py-8 px-8 max-w-xs bg-white dark:bg-indigo-900 rounded-xl shadow-md space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
        <div class="text-center space-y-2 sm:text-left">
          <div class="space-y-0.5">
            <div class="flex px-2 text-center items-center">
              <p class="left-0.5 text-lg text-black dark:text-white font-semibold mr-2">
                ${volunteer.username}
              </p>
              <p class="text-gray-400 dark:text-gray-300 text-md">5.0</p>
              
            </div>
          
            <p class="h-7 px-2 text-gray-500 dark:text-gray-200 font-medium">
              ${volunteer.place}
            </p>
            <div class="flex space-x-3 my-4 text-sm font-semibold">
            <div class="flex-auto flex space-x-3">
              <button id="request-${volunteer.username}" onclick="requestVolunteer(event)" class="px-4 py-1 text-sm text-purple-600 dark:text-purple-400 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">发起请求</button>
              <button id="report-${volunteer.username}" onclick="reportVolunteer(event)" class="px-4 py-1 text-sm text-purple-600 dark:text-purple-400 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">举报</button>
            </div>
              <button id="add-to-favorite-${volunteer.username}" onclick="addToFavorite(this.id)" class="dark flex-none flex items-center justify-center w-9 h-9 rounded-full bg-purple-50 text-purple-700" type="button" aria-label="like">
                  <svg t="1650335767601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2770" width="20" height="20"><path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" p-id="2771" fill="#ffffff"></path></svg>
              </button>
          </div>
        </div>
        </div>
      </div>
        `
    }
    $('#volunteer-list').html(lists)
}

function showRequests(helpRequests) {
    $('#request-list').html('')
    let requests = ''
    for (let i = 0; i < helpRequests.length; i++) {
        let request = helpRequests[i]
        let time = request.time.replace('T', ' ').replace('.000Z', '')
        requests += `
        <form class="flex-auto p-6 max-w-xs rounded-xl shadow-md space-y-2 dark:bg-indigo-900">
        <div class="flex text-center items-center space-x-3">
          <p class="text-md font-semibold dark:text-white">
            ${request.sender}
          </p>
          <p class="text-gray-400 dark:text-gray-300">5.0</p>
        </div>
        <div>
          <p class="text-gray-500 font-medium dark:text-gray-300">${request.place}</p>
        </div>
        <div>
          <p class="text-gray-500 font-medium dark:text-gray-300">${time}</p>
        </div>
        <div>
          <button id="${request.h_id}" onclick="requestDetail(event)" type="button" class="rounded-full border px-4 py-1 text-md border-purple-200 text-purple-400 hover:text-white hover:bg-purple-400">详细信息</button>
        </div>
      </form>
        `
    }
    $('#request-list').html(requests)
}

function showFavorites(favorites) {
    for (let i = 0; i < favorites.length; i++) {
        let love = favorites[i].love
        let button = $(`#add-to-favorite-${love}`)
        button.html(`<svg t="1650335767601" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2770" width="20" height="20"><path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" p-id="2771" fill="#d81e06"></path></svg>`)
        button.removeClass('dark')
    }
}

function submitRequest() {
    socket.emit('submit-request', {
        content: $('#request-content').val(),
        kind: $('input[name="kind"]:checked').val(),
        receiver: null
    })
    $('#request-box').hide()
}

function requestDetail(event) {
    let h_id = $(event.target).attr('id')
    $.ajax({
        url: '/map/getRequest',
        type: 'get',
        data: {
            h_id: h_id
        },
        async: false,
        success: request => {
            showRequestDetail(request, 'detail')
        }
    })
}

function showRequestDetail(request, kind) {
    let box = $('#request-info-box')
    let time = request.time.replace('T', ' ').replace('.000Z', '')
    let title = null
    switch (kind) {
        case 'detail':
            title = '请求信息'
            break
        case 'specified':
            title = '有人向你发起请求'
            break
        case 'all':
            title = '有人发起请求'
            break
    }
    let htmlContent = `
       <div id="request-info" class="bg-white shadow overflow-hidden sm:rounded-lg">
        <div class="flex px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 sm:px-6 justify-between">
            <h3 class="text-lg leading-6 dark:text-white font-medium text-gray-900">${title}</h3>
            <span id="close-request-info" onclick="$('#request-info-box').hide()" class="close float-right dark:text-white cursor-pointer">&times;</span>
        </div>
       <div class="border-t border-gray-200">
      <dl>
        <div class="bg-white px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500 dark:text-white">发起人</dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-white">${request.sender}</dd>
        </div>
        <div class="bg-white px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500 dark:text-white">请求类型</dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-white">${request.kind}</dd>
        </div>
        <div class="bg-white px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500 dark:text-white">发起时间</dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-white">${time}</dd>
        </div>
        <div class="bg-white px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500 dark:text-white">请求地点</dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-white">${request.place}</dd>
        </div>
        <div class="bg-white px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
          <dt class="text-sm font-medium text-gray-500 dark:text-white">请求内容</dt>
          <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 dark:text-white">${request.content}</dd>
        </div>
        <div class="bg-white px-4 py-5 dark:bg-gradient-to-r dark:from-slate-900 dark:to-slate-700 flex justify-center">
          <button id="${-request.h_id}" onclick="takeRequest(event)" class="rounded-lg px-3 py-1 border-2 bg-gradient-to-r from-purple-300 to-purple-200 dark:border-slate-800">接受请求</button>
        </div>
      </dl>
    </div>
  </div>
    `
    box.html(htmlContent)
    $('#request-info-box').show()
}

function takeRequest(event) {
    // 获取请求的路径并将请求状态设为已分配
    let h_id = -$(event.target).attr('id')
    $.ajax({
        url: '/map/getPath',
        type: 'get',
        data: {
            h_id: h_id
        },
        async: false,
        success: data => {
            $('#request-info-box').hide()
            drawPath(data)
        }
    })
}

// 向特定志愿者发起请求
function submitRequestTo(event) {
    let username = $(event.target).attr('id').split('-')[2]
    socket.emit('submit-request', {
        content: $('#request-content').val(),
        kind: $('input[name="kind"]:checked').val(),
        receiver: username
    })
    $('#request-box').hide()
}

// 完成请求,打开评分界面
function finishRequest(event) {
    let h_id = $(event.target).attr('id')
    socket.emit('finish-request', h_id)

    $('#waiting-request-box').hide()

    let gradeBox = $('#grade-box')
    gradeBox.html(
        `<div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="flex px-4 py-5 sm:px-6 justify-between">
      <h3 class="text-lg leading-6 font-medium text-gray-900">评分评价</h3>
      <span id="close-request-info" onclick="$('#grade-box').hide()" class="close float-right cursor-pointer">&times;</span>
    </div>
    <div class="border-t border-gray-200 px-5">
      <div class="bg-white px-4 py-5 items-center flex">
        <h3 class="text-sm w-1/5 text-gray-500 font-medium">分数</h3>
        <div class="space-x-1">
          <button id="1" onclick="grade(this.id)" class="dark"><svg t="1649693295916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" width="30" height="30"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#dbdbdb" p-id="2844"></path></svg></button>
          <button id="2" onclick="grade(this.id)" class="dark"><svg t="1649693295916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" width="30" height="30"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#dbdbdb" p-id="2844"></path></svg></button>
          <button id="3" onclick="grade(this.id)" class="dark"><svg t="1649693295916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" width="30" height="30"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#dbdbdb" p-id="2844"></path></svg></button>
          <button id="4" onclick="grade(this.id)" class="dark"><svg t="1649693295916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" width="30" height="30"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#dbdbdb" p-id="2844"></path></svg></button>
          <button id="5" onclick="grade(this.id)" class="dark"><svg t="1649693295916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2843" width="30" height="30"><path d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z" fill="#dbdbdb" p-id="2844"></path></svg></button>
        </div>
      </div>
      <div class="bg-white px-4 py-5 flex space-x-4">
        <p class="text-gray-500 font-medium text-sm">评价</p>
        <textarea class="bg-gray-200 rounded-md outline-none"></textarea>
      </div>
      <div class="bg-white px-4 py-5 flex justify-center">
        <button id="grade-${h_id}" onclick="submitGrade(event)" class="rounded-lg px-3 py-1 border-0 bg-purple-300">提交</button>
      </div>
      </dl>
    </div>
  </div>
  </div>`
    )
    gradeBox.show()
}